<template>
  <div class="">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-alert center show-icon title="添加商品信息" type="info" :closable="false"></el-alert>
        <el-steps :space="200" :active="activeIndex -0" finish-status="success" align-center >
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
            <el-tabs tab-position="left" v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClicked">
                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="addForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="addForm.goods_price" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_count">
                        <el-input v-model="addForm.goods_count" type="number"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="1">
                    
                </el-tab-pane>
                <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
                <el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
                <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>
    
  </div>
</template>

<script>
export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
            activeIndex: '0',
            addForm: {
                goods_name: '',
                goods_price: 0,
                goods_count: 0,
            },        
            addFormRules: {
                goods_name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }                    
                ],
                goods_price: [
                    { required:true , message:'请输入商品价格' , trigger:'blur' },
                ],
                goods_count: [
                    { required:true , message:'请输入商品数量' , trigger:'blur' },
                ]
            }
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        beforeTabLeave(activeName, oldActiveName) {
            if (this.addForm.goods_name.length === 0) {
                this.$message.error('请先输入商品名称')
                return false
            }
        },
        tabClicked() {
            console.log(this.activeIndex)//当前选中的tab的下标
        }
    }
}
</script>

<style scoped lang="scss">
.el-steps{
    margin: 15px 0;
}
/deep/ .el-step__title{
    font-size: 13px;
}
</style>
